<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
            list-style: none;
        }

        .swiper {
            width: 500px;
            height: 400px;
            margin: auto;
            position: relative;
            overflow: hidden;
        }

        .swiper ul {
            /* 本身只有四张图  但是留5张图的位置 */
            width: 500px;
            height: 2000px;
            position: absolute;
            top: 0;
        }

        .swiper ul li {
            width: 500px;
            height: 400px;
            text-align: center;
            font-size: 50px;
            line-height: 400px;
            background-color: #f00;
        }

        .swiper span {
            width: 30px;
            height: 30px;
            background-color: rgba(0, 0, 0, 0.5);
            color: #fff;
            position: absolute;
            top: 0;
            bottom: 0;
            margin: auto;
            text-align: center;
            line-height: 30px;
        }

        .swiper .next {
            right: 0;
        }

        .swiper ol {
            position: absolute;
            bottom: 0;
            width: 100%;
            display: flex;
            justify-content: center;
        }

        .swiper ol li {
            width: 30px;
            height: 30px;
            background-color: orange;
            margin: 10px;
        }

        .swiper .active {
            background-color: #000;
        }
    </style>
</head>

<body>

    <div class="swiper" id="a">
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>1</li>
        </ul>
        <ol>
            <li class="active" num="0"></li>
            <li num="1"></li>
            <li num="2"></li>
            <li num="3"></li>
        </ol>
        <span class="prev">&lt;</span>
        <span class="next">&gt;</span>
    </div>

    <script>

        


        const get = el => document.querySelector(el);

        const getCss = (ele, prop) => parseInt(getComputedStyle(ele)[prop]);


        const setCss = (ele, options) => {
            for (let prop in options) {
                // ele.style.left = '100px'
                ele.style[prop] = options[prop];
            }
        }

        // 无缝轮播
        //    把第一张图复制一份放在最后面


        //   控制播放第几张  index
        //   定时器         timer
        //   图片  
        //   小点
        //   左右切换

        //   方法
        //     自动播放   autoPlay

        //     绑定事件   


        function Swiper(ele, type) {
            this.oBox = get(ele);
            // 找到装图片的大盒子
            this.oUl = this.oBox.querySelector('ul');
            // 找到图片
            this.oImgs = this.oBox.querySelectorAll('ul li');
            // 找到小点
            this.oDots = this.oBox.querySelectorAll('ol li');
            // 上
            this.oPrev = this.oBox.querySelector('.prev');
            this.oNext = this.oBox.querySelector('.next');
            // 控制播放第几张
            this.index = 0;
            this.timer = null;
            this.flag = true ;

            // 获取图片的宽度
            this.h = this.oImgs[0].offsetHeight;

            // 确认小点切换的事件类型
            this.type = type || 'click';

            // 自动播放
            this.autoPlay();

            // 绑定事件
            this.event();

        }

        Swiper.prototype.autoPlay = function () {
            this.timer = setInterval(() => {
                this.index++;
                // 显示图片和小点
                this.show();
            }, 2000)
        }


        Swiper.prototype.show = function () {
            move({
                ele: this.oUl,
                speed: 30,
                end: -this.index * this.h,
                prop: 'top',
                cb: () => {
                    this.flag = true ;
                    if (this.index === this.oImgs.length - 1) {
                        this.index = 0;
                        setCss(this.oUl, {
                            top: 0
                        })
                    }
                }
            });

            // 小点
            for (let i = 0; i < this.oDots.length; i++) {
                this.oDots[i].classList.remove('active')
            }
            if (this.index === this.oImgs.length - 1) {
                this.oDots[0].classList.add('active')
            } else {
                this.oDots[this.index].classList.add('active')
            }

        }


        // Swiper.prototype.event = function() {
        //     // 上
        //     this.oPrev.onclick = () => {

        //         clearInterval(this.timer);
        //         if(this.index === 0) {
        //             this.index = this.oImgs.length - 1 ;
        //             setCss(this.oUl , {
        //                 top : -this.index * this.h + 'px'
        //             })
        //         }
        //         this.index-- ;
        //         this.show();
        //     }


        //      // 下
        //      this.oNext.onclick = () => {
        //         clearInterval(this.timer);
        //         if(this.index === this.oImgs.length - 1) {
        //             this.index =  0;
        //             setCss(this.oUl , {
        //                 top : -this.index * this.h + 'px'
        //             })
        //         }
        //         this.index++ ;
        //         this.show();
        //     }


        //     // 小点切换
        //     for(let i = 0 ; i < this.oDots.length ; i++) {
        //         this.oDots[i].onclick = () => {
        //             clearInterval(this.timer) ;
        //             this.index = i ;
        //             this.show()
        //         }
        //     }
        // }


        Swiper.prototype.event = function () {

            this.oBox.onclick = e => {
                if(!this.flag) return 
                this.flag = false ;
                if (e.target === this.oPrev) {
                    clearInterval(this.timer);
                    if (this.index === 0) {
                        this.index = this.oImgs.length - 1;
                        setCss(this.oUl, {
                            top: -this.index * this.h + 'px'
                        })
                    }
                    this.index--;
                    this.show();
                }
                else if (e.target === this.oNext) {
                    clearInterval(this.timer);
                    if (this.index === this.oImgs.length - 1) {
                        this.index = 0;
                        setCss(this.oUl, {
                            top: -this.index * this.h + 'px'
                        })
                    }
                    this.index++;
                    this.show();
                }

                else if ([...this.oDots].includes(e.target)) {
                    // 排除自己
                    if(e.target.classList.contains('active')) return 
                    clearInterval(this.timer);
                    this.index = e.target.getAttribute('num');
                    this.show()
                }
            }

        }



        new Swiper('#a')































        function move(options) {
            let { ele, speed, end, prop, cb } = options;
            let cur = getCss(ele, prop);
            speed = end > cur ? speed : -speed;
            let t = setInterval(() => {
                cur += speed;
                setCss(ele, {
                    [prop]: cur + 'px'
                });
                if (Math.abs(end - cur) < Math.abs(speed)) {
                    console.log('结束');
                    clearInterval(t);
                    setCss(ele, {
                        [prop]: end + 'px'
                    });
                    cb && cb()
                }
            }, 20)
        }




    </script>
</body>

</html>